<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select onchange="getCountry()" name="country">
        <option>中国</option>
        <option>美国</option>
        <option>法国</option>
    </select>
    <select onclick="selectCity()" id="province">
        <option>北京市</option>
        <option>河北省</option>
        <option>辽宁省</option>
        <option>山东省</option>
    </select>
    <select id="city">
        <option>--请选择城市--</option>
    </select>
</body>
    <script>
        function getCountry(){
            var oSele = document.getElementsByName('country')[0]
            alert(oSele.value)
        }
        var data={
            '北京市':['海淀区','朝阳区','丰台区'],
            '河北省':['石家庄','唐山','邯郸'],
            '辽宁省':['沈阳','大连','鞍山'],
            '山东省':['青岛','济南','烟台']
        }
        function selectCity(){
            var prov = document.getElementById("province").value
            var citys = data[prov]
            var oCity = document.getElementById('city')
            oCity.innerHTML = '<option>--请选择城市--</option>';
            for (var i=0;i<citys.length;i++){
                var oOpt = document.createElement('option')
                oOpt.innerHTML=citys[i];
                oCity.appendChild(oOpt);
            }
        }

    </script>
</html>